<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	*{margin: 0;padding: 0}

	</style>
</head>

<body>
	
	<canvas id="cans1" width="800" height="400" style="background: #1c6995"></canvas>
	<input type="button" id="btn1" value="Gray" name="">
	<input type="button" id="btn2" value="Yellow" name="">
	<input type="button" id="btn3" value="purple" name="">
	<input type="button" id="btn4" value="blue" name="">
	<input type="button" id="btn5" value="刷新" name="">
  <script>
		window.onload=function(){
			let cans=document.getElementById('cans1');
			let btn1=document.getElementById('btn1');
			let btn2=document.getElementById('btn2');
			let btn3=document.getElementById('btn3');
			let btn4=document.getElementById('btn4');
			let btn5=document.getElementById('btn5');
			let cs=cans.getContext('2d');
			let img=new Image();
				img.src='1.jpg';
			img.onload=function(){
				cs.drawImage(img,0,0);

				let imageData=cs.getImageData(0,0,cans.width,cans.height);
				/*
				console.log(imageData)
				console.log(imageData.data)

				//r行c列的像素值是、   第 (r*cans.width+c)*4+rgba个像素。四个值。0：r，1： g，2： b，3： a ;
				alert(`r:${imageData.data[0]}\ng:${imageData.data[1]}\nb:${imageData.data[2]}\na:${imageData.data[3]}\n`)//左上角的像素值
				alert(`r:${imageData.data[(399*800+799)*4+0]}\ng:${imageData.data[(399*800+799)*4+1]}\nb:${imageData.data[(399*800+799)*4+2]}\na:${imageData.data[(399*800+799)*4+3]}\n`);//右下角的像素
				*/
			btn1.onclick=function(){
				for(let r=0;r<cans.width;r++){
					for(let c=0;c<cans.width;c++){
						let mid=(imageData.data[(r*cans.width+c)*4]+imageData.data[(r*cans.width+c)*4+1]+imageData.data[(r*cans.width+c)*4+2])/3;//获取平均值

						imageData.data[(r*cans.width+c)*4]=imageData.data[(r*cans.width+c)*4+1]=imageData.data[(r*cans.width+c)*4+2]=mid//重新赋值；赋值之后设置画布的颜色值
					}
				}
					cs.putImageData(imageData,0,0);
				};
			btn2.onclick=function(){
				for(let r=0;r<cans.width;r++){
					for(let c=0;c<cans.width;c++){
						
						imageData.data[(r*cans.width+c)*4+2]=0;
					}
				}
					cs.putImageData(imageData,0,0)
				}
			btn3.onclick=function(){
				for(let r=0;r<cans.width;r++){
					for(let c=0;c<cans.width;c++){
						imageData.data[(r*cans.width+c)*4+1]=0;
					}
				}
					cs.putImageData(imageData,0,0)
				}
			btn4.onclick=function(){
				for(let r=0;r<cans.width;r++){
					for(let c=0;c<cans.width;c++){
						imageData.data[(r*cans.width+c)*4]=0;
					}
				}
					cs.putImageData(imageData,0,0)
				};
			}
			
			btn5.onclick=function(){
				window.location.reload();
			}
		}
			
  </script>
</body>
</html>
